<template>
  <vxe-modal title="预约登记" v-model="dialogVisible" width="70%" show-footer esc-closable show-zoom resize>
    <div style="height: 75vh; ">
      <el-form ref="formDialog" :model="form" :rules="rules" label-width="95px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="预订人姓名" prop="ydRXm">
              <el-input v-model="form.ydRXm" placeholder="请输入预订人姓名"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="lxDh">
              <el-input v-model="form.lxDh" placeholder="请输入联系电话"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="入住日期" prop="rzRq">
              <el-date-picker clearable @change="getZj"
                              v-model="form.rzRq"
                              type="date"
                              style="width: 100%;"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择入住日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="离店日期" prop="ldRq">
              <el-date-picker clearable @change="getZj"
                              v-model="form.ldRq"
                              type="date"
                              style="width: 100%;"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择离店日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </div>

    <div slot="footer" class="dialog-footer dialog-footer-center">
      <el-button size="small" @click="submitForm">
        <svg-icon icon-class="confirm1" class-name="custom-class"/>
        确 定
      </el-button>
      <el-button size="small" @click="cancel">
        <svg-icon icon-class="confirm1" class-name="custom-class"/>
        取 消
      </el-button>
    </div>
  </vxe-modal>
</template>

<script>
import {addZxyd} from "@/api/jdgl/zxyd";

export default {
  name: "ZxYd", //在线预订
  data() {
    return {
      dialogVisible: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        ydRXm: [{required: true, message: "预订人姓名不能为空", trigger: "blur"}],
        lxDh: [{required: true, message: "联系电话不能为空", trigger: "blur"}],
        rzRq: [{required: true, message: "入住日期不能为空", trigger: "blur"}],
        ldRq: [{required: true, message: "离店日期不能为空", trigger: "blur"}],
      },
      kfglId: null,
      jg: null, //单日价格
    }
  },
  inject: ['updateYy'],
  created() {

  },
  methods: {
    getZj() {
      if (this.form.rzRq != null && this.form.ldRq != null) {
        const date1 = new Date(this.form.rzRq);
        const date2 = new Date(this.form.ldRq);
        const timeDiff = Math.abs(date2.getTime() - date1.getTime());
        const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
        console.log(daysDiff)
        this.form.zj = this.jg * daysDiff
      }
    },
    handleOpen(item) {
      this.kfglId = item.kfglId
      this.jg = item.jg
      this.dialogVisible = true
      this.form.kfglId = this.kfglId
    },
    cancel() {
      this.dialogVisible = false
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["formDialog"].validate(valid => {
        if (valid) {
          addZxyd(this.form).then(response => {
            this.$modal.msgSuccess("预约成功");
            this.dialogVisible = false;
            this.updateYy();
          });
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        zxydId: null,
        ydRXm: null,
        lxDh: null,
        kfglId: null,
        rzRq: null,
        ldRq: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        userId: null,
        deptId: null,
        zj: null,
      };
      this.resetForm("formDialog");
    },


  }
}
</script>

<style scoped>

</style>
